<template>
  <div class="zon-container wap">
    <x-header v-if="!this.$fromApp(this)" class="vux-1px-b" :left-options="{backText: ''}">
      <span>{{title}}</span>
    </x-header>
    <div class="main">
      <scroller ref="scroll" :on-refresh="refresh" :on-infinite="infinite">
        <div class="list">
          <goodMangerItem
            :erpStatus="erpStatus"
            @dialogComfrim="dialogComfrim"
            @refeshData="refresh(0)"
            isZone="true"
            :checkListArray="checkListArray"
            :useType="2"
            :list="customerList"
          ></goodMangerItem>
        </div>
        <no-data v-show="loadOk" @refreshData="refresh(0)" :list="customerList"></no-data>
      </scroller>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import goodMangerItem from "../../components/good-manager-item.vue";
export default {
  components: {
    goodMangerItem
  },
  data() {
    return {
      page: 0,
      title: "",
      categoryId: "",
      customerList: [],
      hasNext: true,
      checkListArray: [],
      loadOk: false,
      erpStatus: 1
    };
  },
  created() {
    this.title = decodeURIComponent(this.$route.query.title)
      .toString()
      .replace(/~~pct~~/g, "%");
    this.categoryId = this.$route.query.id;
    this.initCheckList();
    console.log("created");
    this.$ajax.get(
      "user/info",
      res => {
        console.log("user/info", res);
        this.erpStatus = res.data.erpStatus;
      },
      {}
    );
    // this.initData(0);
  },
  mounted() {
    window["androidCallJs"] = this.androidCallJs;
  },
  methods: {
    androidCallJs(val) {
      try {
        if (val) {
          val = decodeURIComponent(val.replace(/\+/g, "%20"));
          let obj = JSON.parse(val);
          if (obj) {
            if (obj.code == 1017) {
              let priceSetting = obj.priceSetting; //价格设置监听
              let stock = obj.stock; //库存设置监听
              for (let i = 0; i < this.customerList.length; i++) {
                if (
                  priceSetting &&
                  this.customerList[i].id == priceSetting.goodsId
                ) {
                  this.customerList[i].enquiry = priceSetting.enquiry;
                  this.customerList[i].categoryPrices =
                    priceSetting.priceParams;
                  this.$set(this.customerList, i, this.customerList[i]);
                  break;
                }
                if (
                  stock != undefined &&
                  this.customerList[i].id == obj.goodsId
                ) {
                  this.customerList[i].goodsStock = stock;
                  this.$set(this.customerList, i, this.customerList[i]);
                  break;
                }
              }
            } else {
              obj = this.$getJsonAndroidOrIOS(obj, "goodBeanJson");
              let goodId = obj.id;
              if (goodId > 0) {
                for (let i = 0; i < this.customerList.length; i++) {
                  if (this.customerList[i].id == goodId) {
                    this.customerList[i].brandName = obj.brandName;
                    this.customerList[i].name = obj.name;
                    this.customerList[i].detail = obj.detail;
                    this.customerList[i].spec =
                      obj.specNum + "/包" + obj.rate + "/件";
                    this.customerList[i].defaultPhoto = obj.pics[0];
                    this.$set(this.customerList, i, this.customerList[i]);
                    break;
                  }
                }
              }
            }
          }
        }
      } catch (e) {}
    },
    genrateCheckList(list, cateList, level = 0) {
      for (let i = 0; i < cateList.length; i++) {
        list.push({
          key: cateList[i].id,
          value: "+".repeat(level) + cateList[i].name
        });
        if (cateList[i].children) {
          list = this.genrateCheckList(list, cateList[i].children, level + 1);
        }
      }
      return list;
    },
    initCheckList() {
      this.$ajax.get(
        "goods/category/list",
        res => {
          if (res.code == 200) {
            this.checkListArray = this.genrateCheckList([], res.data);
            // for(let i=0;i<res.data.length;i++){
            //   this.checkListArray.push({key:res.data[i].id,value:res.data[i].name});
            // }
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
          this.loadOk = true;
        },
        {}
      );
    },
    initData() {
      this.$ajax.get(
        "goods/category/list/goods",
        res => {
          if (res.code == 200) {
            if (this.page == 1) {
              this.customerList = res.data;
            } else {
              this.customerList = this.customerList.concat(res.data);
            }

            this.$refs.scroll && this.$refs.scroll.finishPullToRefresh();
            if (
              (res.data && res.data.length < this.$rows) ||
              res.data == undefined
            ) {
              this.hasNext = false;
              this.$refs.scroll && this.$refs.scroll.finishInfinite(true);
            } else {
              this.hasNext = true;
              this.$refs.scroll && this.$refs.scroll.finishInfinite(false);
            }
          } else {
            this.hasNext = false;
            this.$vux.toast.text(res.msg, "center");
            this.$refs.scroll && this.$refs.scroll.finishPullToRefresh();
            this.$refs.scroll && this.$refs.scroll.finishInfinite(false);
          }
        },
        { pageNo: this.page, pageSize: this.$rows, categoryId: this.categoryId }
      );
    },
    refresh() {
      console.log("refresh");
      this.hasNext = true;
      this.page = 1;
      this.initData(0);
    },
    infinite() {
      console.log("infinite", this.page);
      if (this.hasNext) {
        this.page++;
        this.initData();
      } else {
        this.$refs.scroll && this.$refs.scroll.finishInfinite(true);
      }
    },
    dialogComfrim() {
      this.hasNext = true;
      this.page = 1;
      this.initData(0);
    }
  }
};
</script>

<style  lang="less" type="text/less" scoped>
.zon-container {
  background: #fff;
  .list {
    padding: 0.2rem 0.3rem;
  }
}
/deep/ .loading-layer {
  padding-bottom: 100px;
}
</style>
